<template>
	<view class="page">
		<view class="uni-margin-wrap">
			<!-- <view class="logobox">
				<image class="logo" :src="venue.venueLogo"></image>
				<text>{{venue.venueName}}</text>
			</view> -->

			<swiper class="swiper" circular :indicator-dots="false" :autoplay="autoplay" :interval="interval"
				:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
				<swiper-item >
					<view class="swiper-item">
						<image mode="aspectFill" src="/static/indetop.jpg"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- <view class="swiperTag">
				<text>一卡通用</text>
				<text>优质课程</text>
				<text>专业教练</text>
				<text>高效快乐</text>
			</view> -->
		</view>
		<view class="infoArea" >
			
			<view class="contentbox contentbox1">
				<!-- <view class="name">
					{{ venue.venueName }}
					
				</view> -->
				<text class="nameTitle">大满贯权益</text>
			<!-- 	<view class="typetag">
					<text v-for="item in venue.projectList" :key="item.id">{{item.projectName}}</text>
				</view> -->
                <view class="textRow">
		<!-- 		<view>
					<text>营业时间</text>

				xxxx
				</view>
				
				<view class="row">
					联系电话 xxxx
					<image style="position: relative;top: 6rpx;" class="phoneIcon" src="/static/phone.png" @click="makeCall"></image>
					
				</view> -->
				</view>
			</view>
			<view class="t titleBox">主营板块</view>
			 <view class="content zybk">
					
					<!-- <view v-for="(item,index) in modelList" :key="index" @click="goItem({path:item.modelPath})">
						<image :src="item.modelImg" />
					</view> /pages/index/recovery-->
					
					<view v-for="(item,index) in imgList" :key="index"   @click="goItem(item)" >
						<image :src="item.dataImg" />
						<!-- <text>商城</text> -->
					</view>
				<!-- 	<view  @click="goItem({path:'/pages/index/getCoupons'})">
						<image src="/static/bg.png" />
						<text>优惠券</text>
					</view>
				    <view  @click="goItem({path:'/pages/index/admissionFee'})">
				    	<image src="/static/bg.png" />
				    	<text>门票</text>
				    </view>
					<view  @click="goForm('chouzg')">
						<image src="/static/bg.png" />
						<text>新品体验资格</text>
					</view>
					<view  @click="goForm('peixun')">
						<image src="/static/bg.png" />
						<text>培训</text>
					</view>
					<view  @click="goForm('jiaocheng')">
						<image src="/static/bg.png" />
						<text>教程</text>
					</view>
					<view  @click="goForm('gangwei')">
						<image src="/static/bg.png" />
						<text>岗位</text>
					</view> -->
			</view>
		<!-- 	<view class="t titleBox">场馆公告</view>
			<view class="contentbox" v-if="venue.notice" >
				
				<rich-text class="richText" :nodes="venue.notice"></rich-text>
			</view> -->
           <view style="height:1px;background:transparent"></view>

		    <image class="bg" src="../../static/bg1.png"></image>
		   </view>
<!--        <view v-if="venue.notice" class="popContent">
        	<view class="textbody">
        		
				<view class="h3">场馆公告</view>
				<rich-text class="texts richText" :nodes="venue.notice"></rich-text>
				<view class="button" @click="closepopNotice">我已知晓</view>
        	</view>
        </view> -->
		<uni-popup class="popYanZhengBox" ref="popYanZheng" type="center">
			<view class="popup-content">
				<view class="t">绑定会员信息</view>
			<!-- 	<view class="p">该微信未绑定会员，绑定手机号后正常使用。</view> -->
			    <uni-forms class="form" ref="form" :modelValue="formData" :rules="rules">
			    	<uni-forms-item label="姓名" name="username">
			    		<uni-easyinput class="input" type="text" v-model="formData.username" placeholder="请输入姓名" :adjust-position="false"/>
			    	</uni-forms-item>
			    	<uni-forms-item label="手机号" name="mobile">
			    		<uni-easyinput class="input" v-model="formData.mobile" type="text" placeholder="请输入手机号" :adjust-position="false"/>
			    	</uni-forms-item>
					<uni-forms-item label="身份" name="usertype">
						<uni-data-select
						  v-model="formData.usertype"
						  :localdata="localdata"
						 @change="selectChange"
						></uni-data-select>
					</uni-forms-item>
			    	<uni-forms-item v-if="formData.usertype!='pt'" label="会员编号" name="usertypeid">
			    		<uni-easyinput class="input" v-model="formData.usertypeid" type="text" placeholder="请输入会员编号" :adjust-position="false"/>
			    	</uni-forms-item>
			    </uni-forms>
				<button class="start" type="default" @click="bindMessage">绑定</button>
			</view>
		</uni-popup>
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="通知" content="确认领取权益么" @confirm="dialogConfirm"
			@close="dialogClose"></uni-popup-dialog>
	</uni-popup>
	<uni-popup ref="popupSuccess" type="message">
		<uni-popup-message :type="type" :message="title" :duration="2000"></uni-popup-message>
	</uni-popup>
	</view>
</template>

<script>
	import {checknumberid,ShopCarInfosave,showbaseinfolistbydetailkey} from "../../common/api.js"
export default {
	data() {
		return {
			imgList:[],
			type:'',
			title:'',
			actype:'',
			localdata:[{value:'pt',text:'普通用户'},{value:1,text:'团体会员'},{value:2,text:'个人会员'}],
			currUser:{},
			// 表单数据
			formData: {
				username: '',
				mobile: '',
				usertype:'',
				usertypeid:'',
				path:''
			},
			rules: {
				// 对name字段进行必填验证
				username: {
					rules: [{
							required: true,
							errorMessage: '请输入姓名',
						},
						{
							minLength: 2,
							errorMessage: '姓名长度最少{minLength}个字符',
						}
					]
				},
				// 对email字段进行必填验证
				mobile: {
					rules: [{
						required: true,
						errorMessage: '请输入手机号',
					},
					 {
					                                validateFunction: function(rule, value, data, callback) {
														let rep=/^1[3|4|5|6|7|8|9][0-9]\d{8}$/
					                                    if (!rep.test(value)) {
					                                        callback('请输入正确的手机号码')
					                                    }
					                                    return true
					                                }
					                            }
					]
				},
				usertype:{
					rules: [{
						required: true,
						errorMessage: '请选择身份',
					}]
				},
				usertypeid:{
					rules: [{
						required: true,
						errorMessage: '请填写会员号',
					}]
				}
			}
		   
		}
	},
	mounted(){
		showbaseinfolistbydetailkey({dataType:'index',dataStatus:1}).then(res=>{
			this.imgList=res.extend.list
		})
	},
	methods: {
		dialogClose(){
			this.$refs.alertDialog.close()
		},
		dialogConfirm(){
			let currUser = uni.getStorageSync('currUser')
			let form={
				userid:currUser.userid,
				actype:this.actype
			}
			ShopCarInfosave(form).then(res=>{
				this.type="success"
				this.title=res.extend.MSG
					this.$refs.popupSuccess.open()
				
			}).catch(err=>{
				this.type="success"
				this.title=err.data.extend.MSG
					this.$refs.popupSuccess.open()
			})
		},
		goForm(type){
			this.actype=type
			//this.$refs.alertDialog.open()
			uni.navigateTo({
				url: '/pages/index/experience?type='+type
			});
		},
		selectChange(e){
			this.formData.usertype=e
		},
		// 触发提交表单
		bindMessage() {
			this.$refs.form.validate().then(res=>{
				console.log('表单数据信息：', res.usertype);
			    let data={
					userid:this.currUser.userid,
					...res,
					usertype:res.usertype=='pt'?0:res.usertype,
					usertypeid:res.usertypeid?res.usertypeid:0
				}
				checknumberid(data).then(res=>{
					 uni.setStorageSync('currUser', res.extend.userinfo)
					 uni.navigateTo({
					 	url: this.path
					 });
					 this.$refs.popYanZheng.close()
				}).then(res=>{
					uni.showToast({
						title: '绑定失败，请重试',
						icon: 'none',
						duration: 2000
					})
				})
			}).catch(err =>{
				console.log('表单错误信息：', err);
			})
		},
		checkUserPhone(path) {
			let currUser = uni.getStorageSync('currUser')
			this.currUser=currUser
			if(!currUser){
				loginServer.pcLogin().then(()=>{
					currUser = uni.getStorageSync('currUser')
					if (currUser.moblie) {
						debugger
							return true
						} else {
							this.$refs.popYanZheng.open()
							// goPath = path
							return false;
						}
				});
			} else {
				if (currUser.moblie) {
					return true
				} else {
					this.$refs.popYanZheng.open()
					// goPath = path
					return false;
				}
			}
		},
		goItem(item) {
				let path=''
				if(item.dataNum=='menpiao'){
					path='/pages/index/admissionFee'
				}else if(item.dataNum=='youhuiquan'){
					path='/pages/index/getCoupons'
				}else if(item.dataNum=='shangcheng'){
					path='/pages/index/recovery'
				}else{
					path='/pages/index/experience?type='+item.dataNum
				}
				if (this.checkUserPhone(path)) {
					uni.navigateTo({
						url: path
					});
				}
			
		
		}
	}
}
</script><style scope lang="scss">
	.singlePop{ max-height: 60vh;overflow: auto;}
	.map {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		opacity: 0;
	}

	.venuePics {
		position: relative;
		width: 680rpx;
		height: 370rpx;
		border-radius: 15rpx;
		overflow: hidden;

		image {
			width: 680rpx;
			position: absolute;
			height: 370rpx;
		}

		text {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}

	.popYanZhengBox {
		text-align: center;

		.popup-content {
			width: 550rpx;
			max-height: 700rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 15rpx;
		}

		.t {
			font-weight: 500;
			font-size: 17px;
			color: #7B7F83;
			margin-bottom:10px;
		}

		.p {
			line-height: 1.8;
			font-size: 30rpx;
			color: #1A1A1A;
			margin-top: 50rpx;
		}

		button {
			width: 268rpx;
			height: 80rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			border: none;
			background: linear-gradient(270deg, #54E1B9, #00CAA6);
			border-radius: 40rpx;
		}
	}

	.dis {
		color: #b3b3b3;
		border: #fff;
	}
	.zybk{
		padding-bottom:10px;
		>view{
			position:relative;
			margin-bottom:35rpx;
			width:100%;
			height:170rpx;
		   image{
			 width:100%!important;
			 height:170rpx!important;  
			 // border-radius:30rpx;
			 position: absolute;
			 top:0;
			 left:0;
			 z-index:1;
		   }
		   text{
			   color:#000;
			 position: absolute;
			 top:90rpx;
			 left:40rpx;
			  z-index:2;
			   font-size:24px;
			   font-weight: bold;
		   }
			
		}
	}
	.name{
		font-size:22px;
		font-weight: bold;
		color:#ea6011;
	}
	.page{
		background:black;
		overflow-y:auto;
	}
  .infoArea{
	  box-sizing: border-box;
	  min-height:calc( 100vh - 480rpx);
	  .bg{
		  position: absolute;
		  top:0;
		  left:0;
		  width:100%;
		  height:100%;
		   z-index: 0;
	  }
	  .contentbox{
		
		  position: relative;
		    z-index: 1;
		 
	  }
	  .contentbox1{
		 font-size:14px;
		 margin-bottom:35rpx;
		  .mapshow {
			height:60px;  
		  }
		  .xiangqBox{
			
		  }
		  .xiangq{
			  display: flex;
			  flex-direction: column;
			  justify-content:center;
			  width:13px;
			  height:55rpx;
			  color:#c6c6c6;
			  float:right;
              font-size:10px;
		     margin-top:9rpx;
			
		  }
		  .textRow{
			  margin-top:20rpx;
			  display:flex;
			  font-size:12px;
			  justify-content: space-between;
			  align-items: center;
			    color:#000;
			  .row{
				  display: flex;
				  align-items: center;
				
				
				  .phoneIcon{
					 top:0px;
					  margin-left:8rpx;
				  }
			  }
		  }
	  }
	  
	  @media screen and (max-width: 350px) {
	  .textRow{
		   font-size:10px!important;
	  }
	  }
  }
  .swiperTag{
	  box-sizing: border-box;
	  width:100%;
	  padding:0 53rpx;
	 display: flex;
	justify-content: space-between;
	align-items: center;
	color:#e6e6e6;
	position:absolute;
	left:0;
	top:520rpx;
	z-index: 10;
	text{
		font-size:11px;
		border-radius:4px;
		border:1rpx solid #d9d9d9;
		padding:2px 15rpx;
		font-weight: bold;
	}
  }
  .titleBox{
	  position:relative;
	  color:#fff;
	  z-index: 1;
	  font-size:17px;
	  margin-bottom:20px;
  }
  .textcontent{
	  background:#fff;
  }
.nameTitle{
	width:94%;
	height:55rpx;
	margin-top:9rpx;
	font-size:20px;
	color:#ea6011;
	font-weight: bold;
}
</style>
